<template>
  <canvas :id="id" class="canvas"></canvas>
</template>

<script setup>
import { onMounted } from "vue";
import { Parser, Player, DB } from "svga";
let props = defineProps({
  id: {
    type: String,
    required: true,
  },
  svgaImg: {
    type: String,
    required: true,
  }
});
//   let w = computed(() => props.width + 'px')
//   let h = computed(() => props.height + 'px')
const startSvga = async function () {
  try {
    const db = new DB();
    let svga = await db.find(props.svgaImg);
    if (!svga) {
      const parser = new Parser({ isDisableImageBitmapShim: true });
      svga = await parser.load(props.svgaImg);
      await db.insert(props.svgaImg, svga);
    }
    const doc = document.getElementById(props.id);
    const player = new Player(doc);
    await player.mount(svga);
    player.onStart = () => console.log("播放了");
    // 开始播放动画
    player.start();
  } catch (error) {
    console.error(error);
  }
};
onMounted(() => {
  startSvga();
});
</script>

<style scoped lang="scss">
.canvas {
  width: 120px;
  height: 120px;
}
</style>
